<template lang="pug">
  el-drawer.commonDrawer(
    title="叮咛"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="840px"
    @close="$_handleCancel"
  )
    s-table(
      :selection="true"
      :column="column"
      :dataPops="tableData"
      :filterProps="{ fields: [], showBtns: false, }"
      @selection-change="handleSelectionChange"
    )
      .table-operator(slot="table-operator" :style="{marginBottom: '20px'}")
        el-button.gradientVertical(size="large" round @click="addHandle") 添加
      template(slot="action" slot-scope="text, scope")
        el-link(@click="() => infoHandle(scope.id)" type="info") 查看
        el-link(@click="() => deleteHandle(scope.id)" type="primary") 删除
    el-dialog.tl(
      title="添加叮咛"
      width="480px"
      :visible="modalObj.visible"
      append-to-body
      center
      destroy-on-close
      @close="modalObj.visible = false"
    )
      form-box(
        :submitting="addSubmitting"
        :fields="addItems"
        :layoutCol="{ sm: 24, md: 24, lg: 24 }"
        :submitHandle="addSubmitHandle"
        :showCancel="false"
      )
        .objChose(slot="form-obj")
          radio(:options="modalObj.objTypes" v-model="modalObj.objType")
          p(v-if="modalObj.objType === 'person'")
            checkbox(:options="modalObj.children" v-model="modalObj.childrenIds" :props="{ label: 'classesName', value: 'classesId' }")
</template>
<script>
import { mapGetters } from 'vuex'
import { exhortColumn } from './config'
import { getChildrenList } from '@/api/common'
import Radio from '@/components/Basic/Form/Radio'
import Checkbox from '@/components/Basic/Form/Checkbox'

export default {
  components: {
    Radio,
    Checkbox
  },
  props: {
    classesId: {
      type: [Number, String],
      default: ''
    },
    className: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      addSubmitting: false,
      column: exhortColumn,
      tableData: [],
      selectedRows: [],
      modalObj: {
        visible: false,
        objTypes: [
          {
            name: '全班',
            id: 'class'
          },
          {
            name: '个人',
            id: 'person'
          }
        ],
        objType: 'class',
        children: [],
        childrenIds: []
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    addItems () {
      return [
        {
          key: 'obj',
          label: '发送对象',
          type: 'slot'
        },
        {
          key: 'content',
          label: '内容',
          type: 'textarea',
          fieldProps: {
            maxlength: 200,
            'show-word-limit': true
          }
        }
      ]
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          this.getChildrenList()
        }
      }
    }
  },
  methods: {
    // 根据班级获取叮咛列表
    getList () {
    },
    // 获取班级宝宝列表
    getChildrenList () {
      const { className, modalObj, curArea } = this
      getChildrenList({ areaId: curArea.areaId, className }).then(res => {
        console.log(res)
        this.modalObj = {
          ...modalObj,
          children: res || []
        }
      })
    },
    handleSelectionChange (rows) {
      this.selectedRows = rows
    },
    // 打开添加叮咛对象弹窗
    addHandle () {
      const { modalObj } = this
      this.modalObj = {
        ...modalObj,
        visible: true
      }
    },
    // 添加叮咛对象
    addSubmitHandle (values) {
      const { modalObj } = this
      const { objType, childrenIds } = modalObj
      console.log(objType, childrenIds, values)
    },
    // 查看
    infoHandle (id) {
      console.log(id)
    },
    // 删除
    deleteHandle (id) {
      console.log(id)
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
